<template>
  <el-dialog v-model="dialogVisible" v-if="dialogVisible" title="收货地址" width="700px" :before-close="handleDialogClose">
    <el-form :model="addressDTO" :rules="rules" ref="addressDTORef" label-width="100px">
      <el-form-item class="flex-item" label="收货人:" prop="receiverName">
        <el-input v-model="addressDTO.receiverName"></el-input>
      </el-form-item>
      <el-form-item class="flex-item" label="所属地区:" prop="addressName">
        <address-selected ref="addressSelected" :selectedAreaCall="handleSelectedAreaCall"></address-selected>
      </el-form-item>
      <el-form-item class="flex-item" label="详细地址:" prop="address">
        <el-input v-model="addressDTO.address" :rows="5" type="textarea" placeholder="请输入具体地址"></el-input>
      </el-form-item>
      <el-form-item class="flex-item" label="邮编:" prop="customerPostCode">
        <el-input v-model="addressDTO.customerPostCode" placeholder="请输入" />
      </el-form-item>
      <el-form-item class="flex-item" label="手机号码:" prop="receiverPhone">
        <el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="addressDTO.receiverPhone" placeholder="请输入" />
      </el-form-item>
      <el-form-item class="flex-item" label="固定电话:" prop="customerPostCode">
        <el-col :span="5">
          <el-input v-model="addressDTO.telPhoneCode" class="flex-item" placeholder="区号" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="8">
          <el-input v-model="addressDTO.telPhone" class="flex-item" placeholder="电话号码" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="5">
          <el-input v-model="addressDTO.telPhoneBranchCode" class="flex-item" placeholder="分号" />
        </el-col>
      </el-form-item>
      <el-form-item class="flex-item" label="是否默认地址:" prop="defaultFlag">
        <el-switch v-model="addressDTO.defaultFlag" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
          :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button class="dialog-close" @click="handleDialogClose">取消</el-button>
        <el-button type="primary" class="dialog-sure" @click="handleAddAddressDialogSure(addressDTORef)">确定
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted,
    reactive
  } from 'vue'
  import addressSelected from '@/components/addressSelected/index.vue'
  import {
    saveUserAddress,
    getUserAddressById
  } from '@/api/user/address'
  import {
    ElForm,
    ElMessage
  } from 'element-plus'
  export default defineComponent({
    name: 'DialogDeliver',
    props: {
      onSure: Function
    },
    components: {
      addressSelected
    },
    setup(props) {
      onMounted(() => {

      })
      type FormInstance = InstanceType < typeof ElForm >
        const addressSelected = ref( < any > null)
      const dialogVisible = ref( < boolean > false)
      const addressDTORef = ref < FormInstance > ()
      const addressDTO = ref({})
      const handleSelectedAreaCall = (callAddressDTO: any) => {
        addressDTO.value.provinceCode = callAddressDTO.provinceCode
        addressDTO.value.cityCode = callAddressDTO.cityCode
        addressDTO.value.districtCode = callAddressDTO.districtCode
        addressDTO.value.streetCode = callAddressDTO.streetCode
        addressDTO.value.addressName = callAddressDTO.addressName
        addressDTO.value.isOverseas = callAddressDTO.isOverseas
      }

      const handleAddAddressDialogSure = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.validate((valid) => {
          if (valid) {
            if (!addressDTO.value.provinceCode && !addressDTO.value.cityCode && !addressDTO.value
              .districtCode) {
              ElMessage.error('请选择所属地区')
              return false
            }
            saveUserAddress(addressDTO.value).then(response => {
              if (response.isError) return
              dialogVisible.value = false
              ElMessage.success(response.msg)
              props.onSure()
            });
          } else {
            console.log('error submit!')
            return false
          }
        })
      }

      const handleDialogClose = () => {
        dialogVisible.value = false
      }
      const handleDialogOpen = (addressId) => {
        dialogVisible.value = true
        addressDTO.value = {}
        if (addressId) {
          getUserAddressById(addressId).then(response => {
            addressDTO.value = response.data
            addressSelected.value.setAddress(addressDTO.value.isOverseas === 1 ? 4 : 3,
              addressDTO.value.provinceCode, addressDTO.value.cityCode, addressDTO
              .value.districtCode,
              addressDTO.value.streetCode)
          })
        }
      }
      const rules = reactive({
        receiverName: [{
          required: true,
          message: '请输入收货人',
          trigger: 'blur',
        }],
        receiverPhone: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur',
        }],
      })

      return {
        dialogVisible,
        handleAddAddressDialogSure,
        handleDialogClose,
        handleDialogOpen,
        addressDTO,
        addressSelected,
        handleSelectedAreaCall,
        rules,
        addressDTORef
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $detailWidth: 100%;
  $recommendGoodsWidth: 190px;

  .dialog-form {
    .receiver-le {
      width: 670px;
      background: #fafafa;
      padding-right: 50px;

      .le-label {
        width: 135px;
        text-align: right;
      }

      ::-webkit-input-placeholder {
        color: #999999;
      }

      ::-moz-placeholder {
        color: #999999;
      }
    }

    .le-label {
      width: 95px;
      text-align: right;
      color: #333;
    }

    ::-webkit-input-placeholder {
      color: #999999;
    }

    ::-moz-placeholder {
      color: #999999;
    }
  }
</style>
